マウスストーカーを作成する（1）
今回の魅せるホームページ作成講座では、マウスストーカーを作成する方法を解説します。マウスストーカーとは、マウスポインタを追いかけてくる画像のことで、ホームページを演出するテクニックとして活用できます。今回は、マウスストーカー作成の基本を紹介します。 サンプルページ

→ マウスストーカー用の画像を配置する
 
まずは、マウスストーカー用の画像をホームページに配置します。この画像はレイヤーとして配置するため、style属性に「position:absolute」を指定し、「left」「top」で画像の表示位置を指定します。このとき、画像がホームページ内に表示されないように位置を指定してください。今回の例では25×25ピクセルの画像を使用するので（-30,-30）の座標を指定しました。そのほか、id属性でid名を付けておくのも忘れないでください（今回は「img1」というid名を付けました）。

<IMG id="img1" src="star.gif" style="position:absolute; left:-30px; top:-30px;">

  


→ 画像を動かすJavaScriptを呼び出す
 
次に、画像を動かすJavaScript関数「ImageMove()」を呼び出します。この関数はホームページが表示されると同時に実行させるので、BODYタグにonLoadイベントを追加して呼び出します。

<BODY onLoad="ImageMove()">

  


→ マウスポインタの座標を取得する
 
次は、JavaScriptの記述です。最初にJavaScriptで使用する変数を宣言しておきましょう。 「ix」と「iy」はマウスストーカー画像の座標となります。よって、この初期値には先ほどと同じ座標を指定します。一方、「mx」と「my」はマウスポインタがある位置の座標となります。この初期値はとりあえず0を指定しておきます。そして、onmousemoveイベントが発生したとき、すなわちマウスを動かした際に「event.clientX」および「event.clientY」で正しい座標を取得します。
<SCRIPT type="text/javascript">
<!--
var ix=-30, iy=-30;
var mx=0, my=0;
document.onmousemove = MouseMove;
function MouseMove() {
mx=event.clientX;
my=event.clientY;
}
// -->
</SCRIPT>
  
※「event.clientX」や「event.clientY」はInternet Explorer専用のプロパティとなります。このため、他のブラウザでは今回のテクニックは正しく動作しません（画像が表示されません）。


→ 画像の位置をマウスポインタの位置に変更する
 
続いて、JavaScript関数「ImageMove()」を記述します。この関数では、画像の座標（ix,iy）にマウスポインタの座標（mx,my）を代入し、「（画像のid名）.style.left」および「（画像のid名）.style.top」で画像の表示位置を変更します。また、setTimeoutで1 / 100秒（10 / 1000秒）おきに関数「ImageMove()」を繰り返し実行し、マウスポインタの動きに合わせて画像が追従するようにします。
<SCRIPT type="text/javascript">
<!--
var ix=-30, iy=-30;
var mx=0, my=0;
document.onmousemove = MouseMove;
function MouseMove() {
mx=event.clientX;
my=event.clientY;
}
function ImageMove() {
ix=mx;
iy=my;
img1.style.left = ix + "px";
img1.style.top = iy + "px";
setTimeout("ImageMove()",10);
}
// -->
</SCRIPT>
 サンプルページ
以上でマウスストーカーの作成は完了です。ただし、今回のテクニックはマウスポインタにピッタリと画像が追従するため、あまり効果的な演出となりません。そこで、次回はマウスストーカーの動きを改良する方法を紹介します。ご期待ください。


G�|�C���g�|�C���@Amazon Yahoo �y�V

�����z�[���y�[�W �y�V���o�C��[UNLIMIT��������1�~] �C�O�i���q���� �C�O���s�����������I